import React, { Component } from "react";

export class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }button

  // setState是异步的
  // 为什么是异步的呢? 
  // 1. 性能优化
  // 如果每次调用setState都进行一次更新, 那么意味着每次调用setState都会重新渲染整个组件树, 这是非常消耗性能的
  // 所有React将setState设计为异步的, 目的是为了减少不必要的渲染, 当这个事件循环结束后在进行render渲染
  handleClick = () => {
    // 方式一 直接传递一个对象
    // 这个的本质是将这个新对象合并到this.state中  Object.assign(this.state, 传递过来的新对象)
    // this.setState({
    //   count: this.state.count + 1,
    // })
    // 方式二 传递一个函数 这个函数返回一个对象
    this.setState((prevState,props) => {
      // prevState 是上一次的state
      // props 是当前的props
      console.log(prevState)
      console.log(props)
      return {
        count: prevState.count + 1,
      }
    })
    // 方式三 可以传递第二个参数  这个参数是一个函数  这个函数会等待setState执行完毕后执行
    // this.setState({
    //   count: this.state.count + 1,
    // },(e,b) => {
    //   console.log('更新完毕')
    // })
  };

  render() {
    const { count } = this.state;
    return (
      <div>
        <div>{count}</div>
        <button onClick={this.handleClick}>点击</button>
      </div>
    );
  }
}

export default App;
